<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <script src="js/jquery-1.11.0.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        .main{
    width: 1520px;
    height: 2000px;
    cursor: pointer;
}
.banxin{
    width: 1200px;
    height: 4000px;
    margin: 0 auto;
/*     background-color: bisque; */
background-color: white;
    display: flex;
}
.nav{
    height: 30px;
    background-color: white; 
    display: flex;
    flex-wrap: wrap;
}
.a1{
    width: 80px;
    height: 28px;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    display: inline-block;
}
.z1{
    width: 17px;
    height: 17px;
    vertical-align: middle;
}
a{
    text-decoration: none;
    color: black;
    display: inline-block;
    font-size: 12px;
}
a:hover{
    color: blue;
}
.a1:hover{
   color: rgb(58, 58, 222);
}
.a2{
    width: 45px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    
}
.jl{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(img/iconfont.png);
    background-repeat: no-repeat;
   background-position: 4px 4px;  
   position: absolute;
    left: 296px;
    top: -6px;
}
.s1{
    font-size: 12px;
    line-height: 28px;
    text-align: center;
    display: inline-block;
    width: 36px;
    height: 28px;
}
.a2:hover .jl{
    background-position: 0px -127px;  
}
.diqu{
    width: 400px;
    height: 400px;
    border: 1px solid grey;
    background-color: white;
    position: absolute;
    left: 274px;
    top: 32px;
    box-sizing: border-box;
    display: none; 
    z-index: 999;
}
.d1{
    width: 400px;
    height: 50px;
    
    display: flex; 
}
.d11{
    width: 65px;
    height: 50px;
    font-size: 18px;
    text-align: center;
    color: darkgrey;
    line-height: 50px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}
.d12{
    flex: 1;
    border-bottom: 1px solid gray;
}
li{
    list-style: none;
}
.hua1{
    display: inline;
    
}
.hua{
   line-height: 20px;
   width: 400px;
font-size: 15px;
margin-bottom: 20px;
margin-top: 10px;

    
}
.d111{
    display: inline-block;
   /*  width: 25px;
    height: 20px; */
    border-right: 1px solid gray;
    color: gray;
}
.a2:hover .diqu{
    display: block;
}
.ex{
    width: 120px;
    height: 30px;
    
    font-size: 12px;
    line-height: 30px;
      text-indent: 20px;
}
.lvxin{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg.png);
    background-position: -4px -426px;
    position: absolute;
    left: 346px;
    top:8px;
    
}
.exa:hover{
color: orange;
}
.k{
    width: 450px;
    height: 30px;
    /* background-color: rgb(216, 196, 255); */
}
.denglu{
    width: 35px;
    height: 30px;
    margin-left: 10px;
    line-height: 30px;
}
.zhuce{
    width: 35px;
    height: 30px;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 30px;
}





.gowuche{
    line-height: 30px;
    text-indent: 12px;
    width: 90px;
    height: 30px;
}
.che{
    width: 30px;
    height: 30px;
    background-image: url(img/iconfont.png);
    background-position: 0 -270px;
    position: absolute;
    left: 990px;
    top:6px;
}
.wode{
    width: 90px;
    height: 30px;
    text-indent: 12px;
    line-height: 30px;
}
.ren{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg.png);
    background-position: -306px -42px;
    position: absolute;
    right:412px;
    top:12px;
}
.san::after{
    content: "";
 
    display: inline-block;
    border: 8px solid transparent;
    border-top: 8px solid gray;
    position: absolute;
    right:345px;
    top:20px;
}
.wode:hover .san::after{
    border-top: 0px solid transparent;
    border-bottom: 8px solid gray;
}
.ren2{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg.png);
    background-position: -349px -42px;
    position: absolute;
    right:318px;
    top:11px;
}
.san2::after{
    content: "";
 
    display: inline-block;
    border: 8px solid transparent;
    border-top: 8px solid gray;
    position: absolute;
    right:274px;
    top:20px;
}
.wode:hover .san2::after{
    border-top: 0px solid transparent;
    border-bottom: 8px solid gray;
}
.wddd{
    font-size: 12px;
    width: 90px;
    display: none;
    border: 1px solid gray;
    box-shadow: 2px 2px 5px 1px gray;
    position: absolute;
    text-indent: 5px;
}
.dian{
    width: 10px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 0px -253px;
}
.dian2{
    width: 10px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 0px -253px;
}
.dian3{
    width: 10px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 0px -253px;
}
.dian4{
    width: 10px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 0px -253px;
}
.dian5{
    width: 10px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 0px -253px;
}
.wode:hover .wddd{
    display: block;
z-index: 1;
float: left;
}
.dian6{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/bg2.png);
    background-position: 7px -251px;
    
}

.sj{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/iconfont.png);
    background-position: -5px -418px;
    position: absolute;
    right:250px;
    top: 11px;
}
.sj2{
    line-height: 30px;
}
.erweima{
    width: 60px;
    height: 60px;
    z-index: 999;
    position: absolute;
    right: 213px;
    top: 31px;
    display: none;
}
.shouji:hover .erweima{
    display: block;
    
}
.wt{
    color: red;
    line-height: 30px;
    text-indent: 5px;
}
/* 以上是导航栏 */
.part2{
    width: 100%;
    height: 110px;
    background-color:white;
    display: flex;
}
.ewm{
    width: 300px;
    height: 110px;
    
}
.kuang{
    width: 500px;
    height: 110px;
   /*  background-color: aquamarine; */
}
.input1{
    width: 413px;
    height: 34px;
    position: absolute;
    left:461px;
    top:63px;
    font-size: 20px;
    text-indent: 20px;
    color: darkgrey;
    outline: none;
    border: none;
    border: 2px solid green;
}
.input2{
    width: 78px;
    height: 34px;
    background-color: green;
    position: absolute;
    left:875px;
    top:65px;
    outline: none;
    border: none;
}
.remen{
    width: 500px;
 margin-top: 10px;
    display: flex;
    position: absolute;
    left: 460px;
    top: 100px;
    justify-content: space-around;

}
.remen1{
    border-right: 1px solid gray;
    text-align: center;
    padding-right: 20px;
}
.reman3{
    color: gray;
    font-size: 12px;
}
.hong{
    color: red;
}
.hong:hover{
    color: red;
}
.hui{
    color: rgb(89, 92, 94);
}
.hui:hover{
    color: black;
}
.dongche{
    width: 80px;
    height: 50px;
}
.dong{
    position: absolute;
    right: 160px;
    top: 60px;
}
.part3{
    width: 100%;
    height: 35px;
    display: flex;
 
}
#t1{
    width: 114px;
    height: 34px;
    text-align: center;
    line-height: 35px;
}
#t{
    width: 114px;
    height: 34px;
    text-align: center;
    line-height: 35px;
}
.sd{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url();
}
#zhuan{
    display: inline-block;
    transition: 1s;
}
.gou:hover #zhuan{
 transform: rotate(180deg);
}
.shang:hover #zhuan{
    transform: rotate(180deg);
}
.pin1{
width: 120px;
height: 35px;

}
.pin2{
    width: 120px;
    height: 35px;
   
    }
    .pin3{
        width: 120px;
        height: 35px;
     
        }
.g1{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 410px;
    top: 155px;
   
}
.g2{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 529px;
    top: 154px;
}
.g3{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 651px;
    top: 155px;
}
.p1{
    line-height: 35px;
    text-indent: 42px;
    font-size: 15px;
}
.pp2{
line-height: 35px;
text-indent: 42px;
font-size: 15px;
}
.pp3{
    line-height: 35px;
text-indent: 42px;
font-size: 15px;
}
.pin1:hover .g1{
transform: rotateZ(360deg);
transition: 1s;
}
.pin2:hover .g2{
    transform: rotateZ(360deg);
    transition: 1s;
    }
    .pin3:hover .g3{
        transform: rotateZ(360deg);
        transition: 1s;
        }
        .pin1:hover .p1{
            color: green;
        }
        .pin2:hover .pp2{
            color: green;
        }
        .pin3:hover .pp3{
            color: green;
        }
        .part4{
            width: 235px;
            height: 360px;
        
              display: flex;
           position: relative;
        }
        .lz{
            width: 228px;
            height: 360px;
          
            background-color: rgb(203, 203, 206);
        
        }
        .gouzhan{
            width: 228px;
            height: 180px;
        }
.maozhan{
    width: 228px;
    height: 180px;
}
#ww1{
    z-index: 999;
}
#ww2{
    z-index: 999;
}
#ww3{
    z-index: 999;
}
#ww4{
    z-index: 999;
}
#ww5{
    z-index: 999;
}
.gp{
    padding-left: 65px;
    padding-top: 20px;
}
.shuo{
    color: brown;
    color: 12px;
    text-align: center;
}
.zh{
    color: black;

}
.an1{
    width: 110px;
    height: 30px;
    margin-left: 60px;
    margin-top: -7px;
}

.nan{
    width: 228px;
    height: 360px;
    background-color: rgb(231, 231, 235);
    position: absolute;
    left: 0px;
    top: 0;
    display: none;
}
#ww1{
display: none;
}
#xxx{

text-align: center;
line-height: 72px;
}
.yih{
    width: 206px;
    height: 70px;
    border-bottom: dashed gainsboro;
    position: relative;
    
}
#y1{
position: absolute;
    left: 0;
    top: 0; 
}

#y2{
position: absolute;
    left: 0;
    top: 70px; 
}
#y3{
position: absolute;
    left: 0;
    top: 140px; 
}
#y4{
position: absolute;
    left: 0;
    top: 210px; 
}
#y5{
position: absolute;
    left: 0;
    top: 280px; 
}

#xxx a{
    font-size: 14px;
    display: inline-block;
    width: 86px;
    height: 71px;
    
}
.sanjiao{
    width: 20px;
    height: 20px;
    display: inline-block;
    
    background-image: url(img/iconfont.png);
    background-position: 0 -567px;
}
#ww1{
position: absolute;
left: 229px;
top: 0px;
}
#ww2{
    display: none;
    position: absolute;
left: 229px;
top: -71px;
}
#ww3{
    display: none;
    position: absolute;
left: 229px;
top: -142px;
}

#ww4{
    display: none;
    position: absolute;
left: 229px;
top: -213px;
}

#ww5{
    display: none;
    position: absolute;
left: 229px;
top: -284px;
}

/* ///// */

.hei{
    width: 35px;
    height: 100%;
    background-color: #000;
    position: fixed;
    right: 0;
    top: 0;
}
.vvvc{
    width: 300px;
    height: 300px;
    background-color: rgb(219, 215, 222);
    border: 1px solid silver;
    font-size: 28px;
    text-align: center;
    line-height: 300px;
    position: absolute;
    right: 35px;
    top:150px ;
    display: none;
}
.za{
    width: 28px;
    height: 25px;
    display: inline-block;

    background-image: url(img/iconfont.png);
    background-position: -6px -240px;
    position: absolute;
    right: 0;
    top: 150px;
}

.deng:hover .vvvc{
    display: block;
}
.hgc{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -5px -273px;
position: absolute;
right: 0;
top: 190px;
}
.ko{
    width: 14px;
    height: 50px;
    font-size: 14px;
    position: absolute;
right: 0;
top: 210px;
margin-right: 10px;
margin-top: 5px;
}
.dfv{
    width: 300px;
    height: 100px;
    color: #000;
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 200px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}
.hgc:hover .dfv{
    display: block;
}


.hgc2{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc2{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -381px;
position: absolute;
right: 0;
top: 390px;
}
.ko2{
    width: 14px;
    height: 50px;
    font-size: 14px;
    position: absolute;
    color: #eee;
right: 0;
top: 410px;
margin-right: 10px;
margin-top: 5px;
}


.hgc3{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc3{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -308px;
position: absolute;
right: 0;
top: 500px;
}

 .dfv3{
    width: 300px;
    height: 100px;
    color: rgb(18, 17, 17);
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 490px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}
 .hgc3:hover .dfv3{
    display: block;
}  


.hgc4{
    background-color: #007aff;
    color: rgb(202, 228, 228);
}

.xdc4{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -342px;
position: absolute;
right: 0;
top: 530px;
}

  .dfv4{
    width: 300px;
    height: 400px;
    color: rgb(18, 17, 17);
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 540px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}
 .hgc4:hover .dfv4{
    display: block;
}   


.hgc5{
    
    color: rgb(202, 228, 228);
}

.xdc5{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -415px;
position: absolute;
right: 0;
top: 630px;
}
.dfv5{
    
    color: rgb(18, 17, 17);
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 355px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}

.hgc5:hover .dfv5{
    display: block;
}


.hgc6{
 
    color: rgb(202, 228, 228);
}

.xdc6{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -452px;
position: absolute;
right: 0;
top: 660px;
}
.dfv6{
    
    color: rgb(18, 17, 17);
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 665px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}

.hgc6:hover .dfv6{
    display: block;
}


.hgc7{
    color: rgb(202, 228, 228);
}

.xdc7{
width: 35px;
height: 80px;
display: block;
width: 25px;
height: 25px;
background-image: url(img/iconfont.png);
background-position: -10px -483px;
position: absolute;
right: 0;
top: 690px;
}
.dfv7{
    
    color: rgb(18, 17, 17);
    background-color: #e8e9eb;
    border: 1px solid gray;
    position: absolute;
right: 35px;
top: 685px;
display: none;
font-size: 14px;
line-height: 100px;
text-align: center;
}

.hgc7:hover .dfv7{
    display: block;
}
/* //渲染区域 */
.xuanran{
    width: 1000px;
    height: 680px;
   
    position: absolute;
    right: -1000px;
    top: -5px;
   

}
.xuanran img{
    width: 80px;
    height: 80px;
}
.vb{
    font-size: 25px;
    float: left;
    width: 400px;
    height: 200px;

    margin: 10px;
}
#box{
    width: 700px;
    height: 500px;
    background-color: coral;
    float: left;
}
.addnum{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: aqua;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 200px;
}
.cutnum{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: aqua;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    left: 155px;
    top: 200px;
}
.nownum{
    width: 80px;
    height: 30px;
    background-color: bisque;
    position: absolute;
    left: 50px;
    top: 200px;
}
    </style>
    
</head>
<body>
    <div class="main">
        <div class="banxin">
          <div class="nav">
            <a class="a1" href="">
              <img class="z1" src="img/xiaofangzi.png" alt="" />
              <span>E宠首页</span></a
            >
            <span class="s1">河南：</span>
            <div class="a2" href="">
              河南<span class="jl"></span>
              <div class="diqu">
                <div class="d1">
                  <div class="d11">河南</div>
                  <div class="d11">郑州</div>
                  <div class="d11">高新区</div>
                  <div class="d12"></div>
                </div>
                <ul>
                  <a class="hua1" href=""
                    ><li class="hua">
                      <span class="d111">华北：</span>北京 天津 河北 山西 内蒙古
                    </li></a
                  >
                  <a class="hua1" href=""
                    ><li class="hua">
                      <span class="d111">华东：</span>上海 江苏 浙江 安徽 福建
                      山东
                    </li></a
                  >
                  <a class="hua1" href=""
                    ><li class="hua">
                      <span class="d111">华南：</span>广东 广西 海南
                    </li></a
                  >
                  <a class="hua1" href=""
                    ><li class="hua">
                      <span class="d111">华中：</span>江西 河南 湖北 湖南
                    </li></a
                  >
                  <a class="hua1" href=""
                    ><li class="hua">
                      <span class="d111">西南：</span>重庆 四川 贵州 云南 西藏
                    </li></a
                  >
                  <a class="hua1" href=""
                    ><li class="hua">
                      <span class="d111">西北：</span>山西 甘肃 青海 宁夏 新疆
                    </li></a
                  >
                  <a class="hua1" href=""
                    ><li class="hua">
                      <span class="d111">东北：</span>辽宁 吉林 黑龙江
                    </li></a
                  >
                  <a class="hua1" href=""
                    ><li class="hua">
                      <span class="d111">其他：</span>香港 澳门 台湾 钓鱼岛
                      南沙群岛
                    </li></a
                  >
                </ul>
              </div>
            </div>
            <div class="ex">
              <span class="lvxin"></span>
              <a class="exa" href="https://www.epet.com/zhengpin/main.html?do=newgoods">E宠就是正品</a>
            </div>
  
            <div class="k"></div>
            <div class="denglu"> 
              <a  href="http://127.0.0.1:5500/e%E5%AE%A0/zhuce.html">[登录]</a>
            </div>
           <!--  // -->
  
            <div class="zhuce">
              <a href="http://127.0.0.1:5500/e%E5%AE%A0/zhuce.html">[注册]</a>
            </div>
  
  
          <!--   // -->
            <div class="gowuche">
              <span class="che"></span>
              <a href="">购物车</a>
            </div>
  
            <div class="wode">
              <span class="ren"></span>
              <a href="">我的e宠</a>
              <span class="san"></span>
            
                <ul class="wddd">
              <li><span class="dian"></span>我的订单</li>
              <li><span class="dian2"></span>退换货记录</li>
              <li><span class="dian3"></span>我的优惠券</li>
              <li><span class="dian4"></span>我的余额</li>
              <li><span class="dian5"></span>vip俱乐部</li>
                </ul>
              </div>
           
        
            <div class="wode">
              <span class="ren2"></span>
              <a href="">收藏</a>
              <span class="san2"></span>
              <ul class="wddd">
                <li><span class="dian6"></span>我的收藏</li>
              </ul>
            </div>
  
            <div class="shouji">
              <span class="sj"></span>
              <a class="sj2" href="">手机版</a>
              <img class="erweima" src="img/ec二维码.png" alt="">
            </div>
            <div><a class="wt" href="">问题反馈</a></div>
           <!--   以上是导航 -->
           <div class="part2">
            <img class="ewm" src="img/1epet-logo.png" alt="">
            <div class="kuang">
              <input class="input1" type="text" placeholder="巅峰Zv Peak风干主粮">
              <input class="input2" type="button" value="搜索">
              <div class="remen">
                <div class="remen1"><span class="reman3">热门搜索:</span><a class="hong" href="https://wap.epet.com/app/orderTopic/2021">周期配送</a></div>
                <div class="remen1"><a class="hui" href="https://list.epet.com/search/main.html?">基薪美味零食</a> </div>
                <div class="remen1"><a class="hong" href="https://list.epet.com/search/main.html?keyword=1435772,1241039,1137909,1435777,1435714,1248911,1435710,1435716,1248914,1248912,1435774,1248913">动物小镇冻干狗粮</a></div>
                <div class="remen1"><a class="hui" href="https://list.epet.com/search/main.html?keyword=1137454,367760,458190,367762,578583,458191,458192,367763,578584,458189,367761,1137456,1137453,578589,1137455,578585">喵可萌冻干</a></div>
              </div>
            </div>
            
  <div class="dongche">
    <img class="dong" src="img/shopping-cart (1).gif" alt="">
  </div>
           </div>
  <div class="part3">
  <div id="t1" class="gou" >狗狗
    <span id="zhuan" class="iconfont icon-xiangxiazhanhang" ></span>
  </div>
  <div id="t" class="shang">商品分类
    <span id="zhuan" class="iconfont icon-xiangxiazhankai"></span>
  </div>
  <div class="pin1"><img class="g1" src="img/gutou.png" alt=""><a class="p1" href="https://sale.epet.com/mould/temai/dog.html">品牌特卖</a> </div>
  <div class="pin2"><img class="g2" src="img/gutou.png" alt=""><a class="pp2" href="https://www.epet.com/video/fashiondog.html?pet_type=dog">潮品视频</a> </div>
  <div class="pin3"><img class="g3" src="img/gutou.png" alt=""><a class="pp3" href="https://www.epet.com/cleargoodsmdog.html">清仓特价</a> </div>
  </div>
  
  <div class="part4">
  <div id="lzz" class="lz">
    <div id="gz" class="gouzhan">
      <img class="gp" src="img/gou1.jpg" alt="">
      <p class="shuo">3714 <span class="zh">种精选宝贝</span></p>
      <input class="an1" type="button" value="正在狗狗站溜达...">
    </div>
  <div class="maozhan">
    <img class="gp" src="img/mao.jpg" alt="">
    <p class="shuo">2712 <span class="zh">种精选宝贝</span></p>
    <input class="an1" type="button" value="切换到猫猫站...">
  </div>
  <div id="nannan" class="nan">
    <ul id="xxx">
      <li id="y1" class="yih"><a class="zhu" href="">主粮</a> <a class="ling" href="">零食</a> <span class="sanjiao"></span> <img id="ww1" src="img/w1.jpg" alt=""></li>
      <li id="y2" class="yih"><a class="zhu" href="">玩具</a> <a class="ling" href="">清洁</a> <span class="sanjiao"></span><img id="ww2" src="img/w2.png" alt=""> </li>
      <li id="y3" class="yih"><a class="zhu" href="">保键</a> <a class="ling" href="">护理</a> <span class="sanjiao"></span><img id="ww3" src="img/w3.png" alt=""></li>
      <li id="y4" class="yih"><a class="zhu" href="">生活</a> <a class="ling" href="">牵引</a> <span class="sanjiao"></span><img id="ww4" src="img/w4.png" alt=""></li>
      <li id="y5" class="yih"><a class="zhu" href="">洗澡</a> <a class="ling" href="">服饰</a> <span class="sanjiao"></span><img id="ww5" src="img/w5.png" alt=""></li>
    </ul>
  </div>

 <div class="xuanran">
    <ul id="bianda">
        <a href=""></a>
       <!--  <li class="vb"></li>
        <li class="vb"></li>
        <li class="vb"></li>
        <li class="vb"></li>
        <li class="vb"></li>
        <li class="vb"></li>
        <li class="vb"></li>
        <li class="vb"></li>
        <li class="vb"></li>
        <li class="vb"></li>
        <li class="vb"></li>
        <li class="vb"></li> -->
    </ul>

<div class="box2">
    <!-- <img class="zp" src="img/gw1.jpg" alt="">
    <span class="hong">比瑞吉</span>
    <p class="bp">比瑞吉俱乐部 健康膳食配方 成犬粮 10kg</p>
    <span class="hong">￥205.00</span>
    <span>10.25元/每斤</span>
    <p>月销2064袋</p>
    <input type="button" value="加入购物车" /> -->
    </div>


     <span class="addnum">+</span>
     <span class="cutnum">-</span>
     <input class="nownum" type="text">
<div id="box">放购物车数据</div>

 </div>
  </div>
<!-- //hhh -->
<div class="hei">
    <div class="deng">
      <span class="za"></span>
      <div class="vvvc">您还没有登录</div>
    </div>

    <div class="hgc">
      <span class="xdc"></span>
      <div class="ko">购物车</div> 
<div class="dfv">您的购物车中暂无商品，赶紧选购心仪的商品吧</div>

</div>   

<div class="hgc2">
<span class="xdc2"></span>
<div class="ko2">在线客服</div> 
</div>
 

<div class="hgc3">
<span class="xdc3"></span>

<div class="dfv3">您还没有登录，请先登录账号</div> 
    </div>

    <div class="hgc4">
      <span class="xdc4"></span>
    
    <div class="dfv4">没有已浏览商品，</div> 
          </div>
  
          <div class="hgc5">
            <span class="xdc5"></span>
          
         <img class="dfv5" src="img/ec二维码.png" alt="" width="180px" height="300px"> 
                </div>

                <div class="hgc6">
                  <span class="xdc6"></span>
                
               <img class="dfv6" src="img/ec二维码.png" alt="" width="80px" height="80px"> 
                      </div>

                      <div class="hgc7">
                        <span class="xdc7"></span>
                      
                     <img class="dfv7" src="img/ec二维码.png" alt="" width="80px" height="80px"> 
                            </div>   
  </div>








  <script>
    var ot1=document.getElementById("t1")
/* console.log(ot1) */
var ot=document.getElementById("t")
var onannan=document.getElementById("nannan")
var olzz=document.getElementById("lzz")
var oy1=document.getElementById("y1")
var oxxx=document.getElementById("xxx")
var oww1=document.getElementById("ww1")
var oy2=document.getElementById("y2")
var oww2=document.getElementById("ww2")
var oy3=document.getElementById("y3")
var oww3=document.getElementById("ww3")
var oy4=document.getElementById("y4")
var oww4=document.getElementById("ww4")
var oy5=document.getElementById("y5")
var oww5=document.getElementById("ww5")
let aBtns = document.querySelectorAll(".btn");
let onownum = document.querySelectorAll(".nownum");
console.log(onownum)
ot1.onmouseover=function(){ 
    ot1.style.backgroundColor="grey"
    ot1.style.color="white"
    ot.style.backgroundColor="white"
    ot.style.color="black"
    olzz.style.display="block"
    onannan.style.display="none"
}
ot.onmouseover=function(){  //鼠标悬浮效果
    ot.style.backgroundColor="grey"
    ot.style.color="white"
  ot1.style.backgroundColor="white"
    ot1.style.color="black" 
onannan.style.display="block"

}
ot.onclick=function(){
  onannan.style.display="block"
  
}

oy1.onmouseover=function(){
oww1.style.display="block"
}
oy1.onmouseout=function(){
  oww1.style.display="none"
}

oy2.onmouseover=function(){
  oww2.style.display="block"
  }
  oy2.onmouseout=function(){
    oww2.style.display="none"
  }

  oy3.onmouseover=function(){
    oww3.style.display="block"
    }
    oy3.onmouseout=function(){
      oww3.style.display="none"
    }
    oy4.onmouseover=function(){
      oww4.style.display="block"
      }
      oy4.onmouseout=function(){
        oww4.style.display="none"
      }
    
      oy5.onmouseover=function(){
        oww5.style.display="block"
        }
        oy5.onmouseout=function(){
          oww5.style.display="none"
        }

      //.part4是要渲染的盒子部分
      /* axios.get("http://localhost:3000/products").then(function(resData){ */
       
        /* for(let i=0;i<resData.data.length;i++){ */  //循环是把添加好的商品信息取出来
             /*  resData.data[i]; */
              /*  console.log(resData.data[i]) */ /*  测试一下，取到了  */
           //通过字符串拼接渲染到页面
    /*     let str=`<li class="vb"><a href="xiangqingye.html?id=${resData.data[i].id}">
            <img src="${resData.data[i].pimg}">
            <p class="titel">${resData.data[i].pname}</p>
            <p class="price">${resData.data[i].price}</p>
             </a></li>`
             $(".xuanran>ul").append(str)

            }
       
      }) */
      

      axios.get("http://localhost:3000/products").then(function(resData){
       
              
       let str=`<li class="vb" ><a href="xiangqingye.html?id=${resData.data[0].id}">
           <img src="${resData.data[0].pimg}">
           <p class="titel">${resData.data[0].pname}</p>
           <p class="price">${resData.data[0].price}</p>
           <input type="button" value="加入购物车" class="btn"  />
            </a></li>`
            $(".xuanran>ul").append(str)
 
           }
      
     )

     /* axios.get("http://localhost:3000/products").then(function(resData){
       
              
       let str=`<li class="vb" ><a href="xiangqingye.html?id=${resData.data[1].id}">
           <img src="${resData.data[1].pimg}">
           <p class="titel">${resData.data[1].pname}</p>
           <p class="price">${resData.data[1].price}</p>
            </a></li>`
            $(".xuanran>ul").append(str)
 
           }
      
     ) */

    /*  let num=0;
     onownum.forEach((a,i)=>{
        num+=parseInt(a.value);
     });
 */
     $(".addnum").on("click",function(){
        axios.get("http://localhost:3000/shangpindata").then(function(resData){
        let str=`<div class="box2"><a href="xiangqingye.html?id=${resData.data[0].id}">
    <img src="${resData.data[0].pimg}">
<span class="bp">${resData.data[0].pname}</span>
<p class="bp">${resData.data[0].pjieshao}</p>
<span class="hong">${resData.data[0].price}</span>
<span>${resData.data[0].pjinshu}</span>
<p>${resData.data[0].pyuexiao}</p>
<input type="button" value="加入购物车" class="btn"  />
   ` 
$("#box").append(str)

})   
    })
    let p=Number(onannan[i].value)+1
onownum.innerHTML="mkj"
    





    /*  var b=null;//点击次数
    var a=null;//文本框的数值
    $(".addnum").on("click",function(){
        for(var i=0){

        }
    })
         */



    
  </script>
</body>
</html>